<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="../templates/Myui.xhtml"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
	<ui:define name="head">
	</ui:define>
	<ui:define name="customStyle">
		<style type="text/css">
.testreg {
	vertical-align: top;
}

.setWidth {
	width: 155px;
}

.setWidth2 {
	width: 128px;
}

.btn_save {
	background: url("#{request.contextPath}/images/save.png") no-repeat
		scroll 0px -31px transparent !important;
	width: 146px;
	height: 31px;
	display: block;
}

.btn_save:hover {
	background: url("#{request.contextPath}/images/save.png") no-repeat
		scroll 0px 0px transparent !important;
	width: 146px;
	height: 31px;
}
</style>
	</ui:define>
	<ui:define name="customJS">
		<script type="text/javascript">
		/* Need to keep open with the button disiplay  */
		$(document).ready(function(){
		}); 
		</script>
	</ui:define>
	<ui:define name="customCSS">
	</ui:define>
	<ui:define name="content">
		<script type="text/javascript"
			src="#{request.contextPath}/js/ddaccordion.js" />
		<script type="text/javascript">  
		ddaccordion.init({
			headerclass: "expandable", //Shared CSS class name of headers group that are expandable
			contentclass: "categoryitems", //Shared CSS class name of contents group
			revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
			mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
			collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
			defaultexpanded: [2], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
			onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
			animatedefault: false, //Should contents open by default be animated into view?
			persiststate: true, //persist state of opened contents within browser session?
			toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
			togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
			animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
			oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
				//do nothing
			},
			onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
				//do nothing
			}
		})				
</script>
		<div id="dataPage">

			<div>
				<h:form prependId="false">
					<div
						style="float: left; padding-left: 64px; color: rgb(221, 75, 57); font-size: 20px; font-family: Arial, sans-serif;">
						Accounts</div>
				</h:form>
			</div>
			<BR /> <BR />
			<DIV style="border-bottom: 1px solid rgb(235, 235, 235);"></DIV>
			<br />
			<div
				style="float: left; width: 244px; font-family: Arial, sans-serif; font-size: 13px; border-right: 1px solid rgb(235, 235, 235); height: 620px">
				<div class="arrowlistmenu">
					<h3 class="menuheader expandable">Account</h3>
					<ul class="categoryitems">
						<li><a href="#">Account Activity</a></li>
						<li><a href="#">Dashboard</a></li>
						<li><a href="#">Download your data</a></li>
						<li><a href="#">Me on the web</a></li>
					</ul>
					<h3 class="menuheader expandable">Security</h3>
					<ul class="categoryitems">
						<li><a href="#">Recent Activity</a></li>
					</ul>
					<h3 class="menuheader" style="cursor: default">Profile and
						privacy</h3>
					<h3 class="menuheader" style="cursor: default">Google+</h3>
					<p:outputPanel id="showGroup" autoUpdate="true"
						rendered="#{loginBean.adminAuthority}">
						<h3 class="menuheader expandable">Groups</h3>
						<ul class="categoryitems">
							<li><a href='#{request.contextPath}/manage/editGroups.jsf'
								style="text-decoration: none;">Account Authorty</a></li>
						</ul>

					</p:outputPanel>
				</div>
			</div>
			<DIV style="margin-left: 244px;">
				<h:form id="Form" prependId="false"
					style="width:95% ;text-align:left;">
					<p:panel id="detailsPanel" style="border: 0px ;height:620px;">
						<!-- role tree -->
						<p:dataTable var="e" value="#{roleAccessBean.tempRoleViews}"
							stickyHeader="true" style="width:100%;text-align: center;">
							<p:column headerText="user">
								<h:outputText value="#{e.user.username}" />
							</p:column>

							<p:column headerText="FullName">
								<h:outputText value="#{e.user.firstName} #{e.user.lastName}" />
							</p:column>

							<p:column headerText="authority" width="200">
								<ui:repeat value="#{e.roles}" var="r">
									
									
									<!-- <h:outputText value="#{e.roles.iterator().hasNext()}" /> -->
									
									<p:row style="border-width: 1px;border-style: solid;">
										<h:outputText value="#{r.authority}" />
										<br />
										<!-- <p:outputPanel rendered="#{e.roles.iterator().hasNext()}"> -->
										<hr/>
										<!-- </p:outputPanel> -->
									</p:row>
								</ui:repeat>
							</p:column>

							<p:column headerText="LoginAttempt">
								<h:outputText value="#{e.user.loginAttempts}" />
							</p:column>

							<p:column headerText="Account Enable">
								<h:outputText value="#{e.user.enabled}" />
							</p:column>

						</p:dataTable>







































						<!-- test -->
						<p:panelGrid
							style="margin-top:20px;width:100%;text-align: center;">
							<f:facet name="header">
								<p:row>
									<p:column colspan="5">User Mapped Role Table</p:column>
								</p:row>
								<p:row>
									<p:column>user</p:column>
									<p:column>FullName</p:column>
									<p:column>authority</p:column>
									<p:column>LoginAttempt</p:column>
									<p:column>Account Enabled</p:column>
								</p:row>
							</f:facet>
							one
							<p:row>
								<p:column rowspan="2" style="font-weight: bold;">admin</p:column>
								<p:column rowspan="2" style="font-weight: bold;">Liang WeiCheng</p:column>
								<p:column>ROLE_ADMINISTRATOR</p:column>
								<p:column rowspan="2" style="font-weight: bold;">0</p:column>
								<p:column rowspan="2" style="font-weight: bold;">1</p:column>
							</p:row>
							<p:row>
								<p:column>ROLE_USER </p:column>
							</p:row>

							two
							<p:row>
								<p:column style="font-weight: bold;">test</p:column>
								<p:column style="font-weight: bold;">Ghiam Beng</p:column>
								<p:column>ROLE_USER</p:column>
								<p:column style="font-weight: bold;">0</p:column>
								<p:column style="font-weight: bold;">1</p:column>
							</p:row>

							three
							<p:row>
								<p:column style="font-weight: bold;">weicheng</p:column>
								<p:column style="font-weight: bold;">Raven Tam</p:column>
								<p:column>ROLE_ADMINISTRATOR </p:column>
								<p:column style="font-weight: bold;">0</p:column>
								<p:column style="font-weight: bold;">0</p:column>
							</p:row>

							four
							<p:row>
								<p:column style="font-weight: bold;">sugus</p:column>
								<p:column style="font-weight: bold;">Su Yihang</p:column>
								<p:column>ROLE_USER </p:column>
								<p:column style="font-weight: bold;">0</p:column>
								<p:column style="font-weight: bold;">1</p:column>
							</p:row>

							five
							<p:row>
								<p:column style="font-weight: bold;">guest</p:column>
								<p:column style="font-weight: bold;">Xue Liang</p:column>
								<p:column>
								</p:column>
								<p:column style="font-weight: bold;">0</p:column>
								<p:column style="font-weight: bold;">1</p:column>
							</p:row>
						</p:panelGrid>




































					</p:panel>
					<!-- use link -->
					<p:commandLink id="updateInfo"
						style="float:right;bottom: 40px;margin-right: 26px; margin-top: -42px;"
						action="#{loginBean.doUpdateInfo()}" update=":growl"
						styleClass="btn_save">
					</p:commandLink>
				</h:form>
			</DIV>

		</div>
	</ui:define>
</ui:composition>